<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="swiper.js"></script>
    <link rel="stylesheet" href="swiper.css" type="text/css"/>
</head>
<body>

<div class="section">
    <div class="swiper-container" >
        <div  class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="../src/fixtures/sliders/t1.svg"/>
            </div>
            <div class="swiper-slide">
                <img src="../src/fixtures/sliders/t2.svg"/>
            </div>
        </div>

        <div class="swiper-pagination" ></div>
    </div>
</div>
<script>

    window.setTimeout(
            function(){
                new Swiper('.swiper-container',{//this.$refs.slider,{
                    pagination:'.swiper-pagination',//this.$refs.pagination,
                    paginationClickable:true,
                    spaceBetween:30,
                    centeredSlides:true,
                    autoplay:1500,
                    autoplayDisableOnInteraction:false
                });
            }
    ,100
    );

</script>
<style>
    .swiper-container {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .swiper-wrapper {
        height: 200px;
    }

    .swiper-slide img {
        max-width: 100%;
    }

    .swiper-slide {
        text-align: center;
        background: #fff;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
</style>

</body>
</html>